import 'package:flutter/material.dart';
import '../../manger/cached_image_widget.dart';

class CustomOverlayImageView extends StatelessWidget {
  final VoidCallback onClose;
  final String? imageUrl;

  CustomOverlayImageView({
    required this.onClose,
    required this.imageUrl,
  });

  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.transparent,
      child: Stack(
        children: [
          // Dimming overlay background
          GestureDetector(
            onTap: onClose,
            child: Container(
              color: Colors.black.withValues(alpha: 0.4),
            ),
          ),
          // The custom overlay content (popup window)
          Center(
            child: Material(
              color: Colors.transparent,
              child: Container(
                margin: EdgeInsets.symmetric(horizontal: 15),
                padding: EdgeInsets.all(5),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(12),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black.withValues(alpha: 0.2),
                      blurRadius: 10,
                      offset: Offset(0, 2),
                    ),
                  ],
                ),
                child: Stack(
                  children: [
                    // Close Button positioned at the top-right corner
                    Positioned(
                      right: 1,
                      top: 1,
                      child: GestureDetector(
                        onTap: onClose,
                        child: Icon(Icons.close, color: Colors.black),
                      ),
                    ),
                    // Image content
                    Padding(
                      padding: EdgeInsets.all(20),
                      child: CachedImage(
                        imageUrl: imageUrl ?? '',
                        fit: BoxFit.cover,
                        placeholderPath: 'assets/images/placeholderImage.png',
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}